<script setup lang="ts">
import CpNavBar from '@/components/cp-nav-bar.vue'
import { ref } from 'vue'
// 是否验证码登录
const isPass = ref(true) // 切换登录类型
const username = ref('')
const password = ref('')
const identifyPwd = ref('') // 手机验证码

const clickTabRight = () => {
  console.log(1111)
}

const onSubmit = (values) => {
  console.log('submit', values)
}

const toggleLogin = () => {
  isPass.value = isPass.value ? false : true
}
</script>

<template>
  <div class="login-page">
    <cp-nav-bar :rTitle="'注册'" @clickRight="clickTabRight"></cp-nav-bar>
    <div class="login-all">
      <div class="login_header">
        <h3>{{ isPass ? '短信验证码登录' : '密码登录' }}</h3>
        <a href="javascript:;" @click="toggleLogin">
          {{ isPass ? '密码登录' : '短信验证码登录' }}
          <van-icon name="arrow" />
        </a>
      </div>
      <div class="login_content">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="用户名"
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-if="!isPass"
              v-model="password"
              type="password"
              name="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-else
              v-model="identifyPwd"
              name="验证码"
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            >
              <template #button> <span>发送验证码</span> </template>
            </van-field>
          </van-cell-group>
          <van-radio name="1" icon-size="14px">
            <a href="javascript:;"></a>
            我已同意<a href="javascript:;">用户协议</a>及
            <a href="javascript:;">隐私条款</a>
          </van-radio>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              登录
            </van-button>
          </div>
          <a href="javascript:;" class="forgetPwd">忘记密码?</a>
        </van-form>
      </div>
      <div class="login_bottom">
        <van-divider>第三方登录</van-divider>
        <div class="icon">
          <img src="../../assets/qq.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  .login-all {
    .login_header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin: 30px 30px 40px 30px;
      h3 {
        font-size: 24px;
        font-weight: 600;
      }
    }
    .login_content {
      .van-radio {
        margin-left: 30px;
        margin-top: 30px;
        a {
          color: var(--cp-primary);
          margin: 0 4px 0 4px;
        }
      }
      .forgetPwd {
        margin-left: 30px;
      }
      .van-button {
        font-size: 16px;
      }
    }
    .login_bottom {
      margin-top: 100px;
      .icon {
        position: relative;
        img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
